<template>
  <div>
    <el-card class="box-card" style="width: 400px">
      <div slot="header" class="clearfix">
        <span>{{ role.username }}</span>
      </div>
      <div>
        <div style="display: flex; justify-content: center">
          <img
            title="点击修改用户头像"
            :src="role.userFace"
            style="height: 100px; width: 100px; border-radius: 50px"
            alt=""
          />
        </div>
        <div style="margin-top: 5px">
          角色昵称：
          <el-tag>{{ role.realname }}</el-tag>
        </div>
        <div style="margin-top: 5px">
          角色手机号：
          <el-tag v-if="role.phone">{{ role.phone }}</el-tag>
          <el-tag v-else>-</el-tag>
        </div>
        <div style="margin-top: 5px">
          角色邮箱：
          <el-tag v-if="role.email">{{ role.email }}</el-tag>
          <el-tag v-else>-</el-tag>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCurrentAdminInfo } from '@/api/userinfo'
import store from '@/store'

export default {
  name: 'UserInfo',
  data() {
    return {
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr')
      },
      areas: [],
      levels: [],
      countries: [],
      role: {
        id: null,
        username: '',
        password: '',
        realname: '',
        userFace: ''
      }
    }
  },
  mounted() {
    this.initRole()
  },
  methods: {
    initRole() {
      getCurrentAdminInfo().then((resp) => {
        if (resp) {
          this.role = resp
          // 存入用户信息
          store.commit('INIT_ROLE', resp)
          window.sessionStorage.setItem('role', JSON.stringify(resp))
        }
      })
    }
  }
}
</script>

<style>
label {
  display: inline-block;
  width: 100px;
  text-align: right;
}
</style>
